<template>
	<div class="root">
		<text>服务评分</text>
		<div class="store-info">
			<image src="/static/images/mine/汽车美容店.jpg" mode="widthFix"></image>
			<view class="name">
				<view>小王汽车美容店</view>
				<view class="star-rating">
					<view v-for="(star, index) in 5" :key="index" :class="{ 'active-star': currentRating > index }"
						@click="rateStar(index + 1)">
						★
					</view>
				</view>
			</view>
		</div>
		
		<!-- 评语 -->
		<text>评语 (0-200字)</text>
		<div class="comment-section">
			<textarea id="comment" v-model="comment" placeholder="请写下您的意见和建议..."></textarea>
		</div>
		
		<!-- 照片 -->
		<div class="photo-upload">
			<label for="photo">照片 (选填)</label>
			<div class="upload-box" @click="openFilePicker">
				<i class="plus-icon">+</i>
				<span>上传照片</span>
			</div>
			<input type="file" id="photo" ref="photoInput" style="display: none;">
		</div>
		<button class="btn" @click="submitReview">提交</button>
	</div>
</template>

<script setup>
	import {
		ref
	} from 'vue';

	const currentRating = ref(0);
	const comment = ref('');

	const rateStar = (rating) => {
		currentRating.value = rating;
	};

	const openFilePicker = () => {
		const photoInput = document.getElementById('photo');
		photoInput.click();
	};

	const submitReview = () => {
		// 这里可以添加提交到后端的逻辑，例如使用fetch发送数据
		console.log('评分:', currentRating.value);
		console.log('评语:', comment.value);
		// 处理上传照片的逻辑，这里简单示例，可根据实际情况完善
		const photoInput = document.getElementById('photo');
		const file = photoInput.files[0];
		if (file) {
			console.log('上传的照片:', file);
		}
	};
</script>

<style>
	.root {
		background-color: white;
		height: 100vh;
		padding: 15px;
		box-sizing: border-box;
	}
	
	text {
		/* background-color: pink; */
		font-weight: bolder;
	}
	
	.store-info {
		/* background-color: palegreen; */
		display: flex;
		margin-bottom: 20px;
		margin-top: 10px;
	}
	.store-info > image {
		background-color: palevioletred;
		width: 200px;
		height: 120px;
	}
	.name {
		/* background-color: orchid; */
		width: 100%;
		padding: 10px 20px;
		font-size: 20px;
	}
	.name > view {
		height: 30px;
	}

	.star-rating {
		/* background-color: bisque; */
		width: 80%;
		display: inline-block;
		font-size: 20px;
		color: #ccc;
		display: flex;
		justify-content: space-between;
	}

	.star-rating > view {
		/* cursor: pointer; */
		font-size: 30px;
	}

	.active-star {
		color: gold;
		font-size: 30px;
	}

	.comment-section {
		margin-bottom: 15px;
	}

	.comment-section textarea {
		width: 100%;
		padding: 8px;
		border: 1px solid #ccc;
		border-radius: 5px;
		margin-bottom: 20px;
		margin-top: 10px;
	}

	.photo-upload {
		margin-bottom: 15px;
	}

	.upload-box {
		border: 1px solid #ccc;
		border-radius: 5px;
		padding: 20px;
		text-align: center;
		/* cursor: pointer; */
		margin-bottom: 20px;
		margin-top: 10px;
	}

	.plus-icon {
		font-size: 30px;
		margin-bottom: 5px;
	}
	
	.btn {
		background-color: #1D6FFF;
		color: white;
		width: 80%;
	}
</style>